<template>
  <div class="header" >
    <div class="content-wrapper" >
      <div class="head">
         <img v-lazy="seller.clerk_info.avatar"alt="" />
      </div>
      <h1 class="text" v-html="seller.clerk_info.weixin"></h1>
      <h2 class="desc" v-html="seller.shop_name_alias"></h2>
        <ul class="list" >
          <li >{{seller.shop_sale_info.fan_count}}粉丝</li>
          <li >{{seller.shop_sale_info.sale_count}}销量</li>
          <li >{{seller.shop_sale_info.product_count}}个上架产品</li>
        </ul>
    </div>
    <div class="background">
      <img :src="seller.background_url" height="262" width="395" alt="" />
  </div>
  </div>

</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      seller: {
        type: Object
      }
    }
  }
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"
  .header
    position: relative;
    color: #fff;
    overflow: hidden;
    background: rgba(7,17,27,0.5);
    z-index:0
    font-size: 0
    .content-wrapper
      position:relative
      padding: 12px
      text-align: center
      .head
        height: 0px
        margin: 0 auto
        padding-bottom: 56px
        overflow: hidden
        border-radius: 50%
        width: 56px
        &>img
          width:56px
          min-height:56px
      .text
        vertical-align: top
        line-height: 24px
        font-size: $font-size-medium
      .desc
        font-size: $font-size-small
        color: #fff
        line-height: 12px
        width: 80%;
        padding: 0 10%
        white-space: nowrap
        overflow: hidden
        text-overflow: ellipsis
      .list
        font-size: $font-size-medium
        li
          display: inline-block
          line-height: 24px
          padding:0 20px
          font-size:12px
    .background
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      -webkit-filter: blur(10px)
      filter: blur(10px)
</style>
